<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{margin: 0; padding: 0;}
		#box {width:250px;margin: 150px auto 0; font-size: 20px;}
		#p1 {height: 30px;padding: 4px 8px; line-height: 30px;border: 2px solid orange;padding-left: 8px; font-weight: bold;white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
		#div2 {display: none;}
		#div2 a {height: 30px; line-height: 30px; text-decoration: none; display: block; border: 1px solid orange;border-top: none;padding: 4px 8px; color: #000;}
		a:hover{background-color: #aaf999}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oP = document.getElementById('p1');
		var oLis = document.getElementById('div2');
		var aA = document.getElementsByTagName('a');

		oLis.onclick = oP.onclick = function (ev){
			var ev = ev || event;

			ev.cancelBubble = true;

			oLis.style.display = 'block';

		};

		document.onclick = function (){
			oLis.style.display = 'none';
		}

		document.onkeydown = function (ev){

		}
		for (var i = 0; i < aA.length; i++) {
			aA[i].onclick = function (ev){
				var ev = ev || event;
				// var iNow = this;
				if (oP.innerHTML == '请选择字体') {			//防止一开始按住shift时连初始的文字也进去
					oP.innerHTML = '';
				};

				if (ev.shiftKey ) {							//需要用事件而不是单单只有shiftKey
					if (oP.innerHTML == '') {				//防止一开始按住shift时，第一个出现‘,’
						oP.innerHTML = this.innerHTML;
					} else{
						oP.innerHTML += ',' + this.innerHTML;
					};
				}else{
					oP.innerHTML = this.innerHTML;
				}
			}
		};

		oP.onmouseover = function (){
			this.title = this.innerHTML;
		}
	}
	</script>
</head>
<body>
	<div id="box">
		<p id="p1">请选择字体</p>
		<div id="div2">
			<a href="javascript:;">宋体</a>
			<a href="javascript:;">楷体</a>
			<a href="javascript:;">微软雅黑</a>
			<a href="javascript:;">仿宋</a>
			<a href="javascript:;">黑体</a>
		</div>
	</div>
</body>
</html>